<div class="replica-set">
  <div class="form-group" ng-class="{ 'has-error' : !form.replicaSetName.$valid && formSubmitted }">
    <label class="col-sm-4 control-label">Replica Set Name</label>
    <div class="col-sm-8">
      <input class="form-control" ng-model="replicaSet.name" name="replicaSetName" type="text" required="true">
    </div>
  </div>
  <div class="replica-set-pairs">
    <div class="replica-set-pair" ng-repeat="server in replicaSet.servers">
      <ul class="menu">
        <li>
          <button class="btn btn-default" ng-click="removeSet(server)">
            <i class="fa fa-plus rotate-45"></i>
          </button>
        </li>
      </ul>
      <div class="form-group" ng-class="{ 'has-error' : !form['host-{{ $index }}'].$valid && formSubmitted }">
        <label class="col-sm-4 control-label">Server {{ ($index + 1) }} Host</label>
        <div class="col-sm-8">
          <input class="form-control" ng-model="server.host" name="host-{{ $index }}" type="text" placeholder="localhost" required>
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : !form['port-{{ $index }}'].$valid && formSubmitted }">
        <label class="col-sm-4 control-label">Server {{ ($index + 1) }} Port</label>
        <div class="col-sm-8">
          <input class="form-control" ng-model="server.port" name="port-{{ $index }}" type="text" placeholder="27017" required>
        </div>
      </div>
    </div>
    <div class="col-sm-8 col-sm-offset-4">
      <a class="add-link" type="button" ng-click="addSet($event)">
        <i class="fa fa-plus"></i> Add Set
      </a>
    </div>
  </div>
</div>
